<template>
  <view class="page">
    <!-- 状态栏占位 -->
    <view :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-title">工作台</view>
      <view class="nav-right" @tap="goToMessages">
        <text class="fa fa-bell-o search-icon fa-gray"></text>
      </view>
    </view>

    <!-- 主内容 -->
    <view class="content">
      <!-- 教学培训 -->
      <view class="section">
        <view class="section-header">
          <view class="section-icon section-icon-blue">
            <text
              class="fa fa-graduation-cap fa-small"
              style="color: #fff"
            ></text>
          </view>
          <text class="section-title">教学培训</text>
        </view>
        <view class="workbench-container">
          <view class="workbench-grid">
            <!-- 课程学习 -->
            <view class="workbench-item" @tap="goToCourses">
              <view class="workbench-icon workbench-icon-blue">
                <text class="fa fa-book fa-lg"></text>
              </view>
              <text class="workbench-text">课程学习</text>
            </view>

            <!-- 理论考试 -->
            <view class="workbench-item" @tap="goToExam">
              <view class="workbench-icon workbench-icon-amber">
                <text class="fa fa-pencil fa-lg"></text>
                <view class="workbench-badge">
                  <text class="workbench-badge-text">2</text>
                </view>
              </view>
              <text class="workbench-text">理论考试</text>
            </view>

            <!-- 线下培训 -->
            <view class="workbench-item" @tap="goToTraining">
              <view class="workbench-icon workbench-icon-green">
                <text class="fa fa-clipboard fa-lg"></text>
              </view>
              <text class="workbench-text">线下培训</text>
            </view>

            <!-- 题库练习 -->
            <view class="workbench-item" @tap="goToQuestionBank">
              <view class="workbench-icon workbench-icon-orange">
                <text class="fa fa-question-circle fa-lg"></text>
              </view>
              <text class="workbench-text">题库练习</text>
            </view>

            <!-- 我的证书 -->
            <view class="workbench-item" @tap="goToCertificates">
              <view class="workbench-icon workbench-icon-pink">
                <text class="fa fa-trophy fa-lg"></text>
              </view>
              <text class="workbench-text">我的证书</text>
            </view>

            <!-- 学习统计 -->
            <view class="workbench-item" @tap="goToStats">
              <view class="workbench-icon workbench-icon-cyan">
                <text class="fa fa-bar-chart fa-lg"></text>
              </view>
              <text class="workbench-text">学习统计</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 质量检查 -->
      <view class="section">
        <view class="section-header">
          <view class="section-icon section-icon-green">
            <text
              class="fa fa-check-square fa-small"
              style="color: #fff"
            ></text>
          </view>
          <text class="section-title">质量检查</text>
        </view>
        <view class="workbench-container">
          <view class="workbench-grid">
            <!-- 质量检查 -->
            <view class="workbench-item" @tap="goToQualityCheck">
              <view class="workbench-icon workbench-icon-green">
                <text class="fa fa-search fa-lg"></text>
                <view class="workbench-badge">
                  <text class="workbench-badge-text">3</text>
                </view>
              </view>
              <text class="workbench-text">质量检查</text>
            </view>

            <!-- 整改分析 -->
            <view class="workbench-item" @tap="goToImprovement">
              <view class="workbench-icon workbench-icon-yellow">
                <text class="fa fa-wrench fa-lg"></text>
              </view>
              <text class="workbench-text">整改分析</text>
            </view>

            <!-- 审核评审 -->
            <view class="workbench-item" @tap="goToAudit">
              <view class="workbench-icon workbench-icon-purple">
                <text class="fa fa-check-square fa-lg"></text>
              </view>
              <text class="workbench-text">审核评审</text>
            </view>

            <!-- 追踪检查 -->
            <view class="workbench-item" @tap="goToTracking">
              <view class="workbench-icon workbench-icon-red">
                <text class="fa fa-eye fa-lg"></text>
              </view>
              <text class="workbench-text">追踪检查</text>
            </view>

            <!-- 质控分析 -->
            <view class="workbench-item" @tap="goToQualityAnalysis">
              <view class="workbench-icon workbench-icon-teal">
                <text class="fa fa-line-chart fa-lg"></text>
              </view>
              <text class="workbench-text">质控分析</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 其他功能 -->
      <view class="section section-bottom">
        <view class="section-header">
          <view class="section-icon section-icon-indigo">
            <text class="fa fa-ellipsis-v fa-small" style="color: #fff"></text>
          </view>
          <text class="section-title">其他功能</text>
        </view>
        <view class="workbench-container">
          <view class="workbench-grid">
            <!-- AI助手 -->
            <view class="workbench-item" @tap="goToAI">
              <view class="workbench-icon workbench-icon-indigo">
                <text class="fa fa-magic fa-lg"></text>
              </view>
              <text class="workbench-text">AI助手</text>
            </view>

            <!-- 互动交流 -->
            <view class="workbench-item" @tap="goToCommunity">
              <view class="workbench-icon workbench-icon-rose">
                <text class="fa fa-comments-o fa-lg"></text>
              </view>
              <text class="workbench-text">互动交流</text>
            </view>

            <!-- 满意度调查 -->
            <view class="workbench-item" @tap="goToSurvey">
              <view class="workbench-icon workbench-icon-emerald">
                <text class="fa fa-star fa-lg"></text>
              </view>
              <text class="workbench-text">满意度调查</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
    };
  },
  onLoad() {
    // 获取系统状态栏高度
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight || 0;
  },
  methods: {
    // 导航方法
    goToHome() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    goToWorkbench() {
      // 已在工作台
    },
    goToProfile() {
      uni.navigateTo({
        url: "/pages/profile/profile",
      });
    },
    goToMessages() {
      uni.navigateTo({
        url: "/pages/message/message",
      });
    },

    // 教学培训模块
    goToCourses() {
      uni.navigateTo({
        url: "/pages/courses/courses",
      });
    },
    goToExam() {
      uni.navigateTo({
        url: "/pages/exam/exam",
      });
    },
    goToTraining() {
      uni.navigateTo({
        url: "/pages/training/training",
      });
    },
    goToQuestionBank() {
      uni.navigateTo({
        url: "/pages/question/question",
      });
    },
    goToCertificates() {
      uni.navigateTo({
        url: "/pages/certificates/certificates",
      });
    },
    goToStats() {
      uni.navigateTo({
        url: "/pages/stats/stats",
      });
    },

    // 质量检查模块
    goToQualityCheck() {
      uni.navigateTo({
        url: "/pages/quality-check/quality-check",
      });
    },
    goToImprovement() {
      uni.navigateTo({
        url: "/pages/improvement-analysis/improvement-analysis",
      });
    },
    goToAudit() {
      uni.navigateTo({
        url: "/pages/audit-review/audit-review",
      });
    },
    goToTracking() {
      uni.navigateTo({
        url: "/pages/tracking-inspection/tracking-inspection",
      });
    },
    goToQualityAnalysis() {
      uni.navigateTo({
        url: "/pages/quality-analysis/quality-analysis",
      });
    },

    // 其他功能模块
    goToAI() {
      uni.showToast({
        title: "AI助手功能开发中",
        icon: "none",
      });
    },
    goToCommunity() {
      uni.navigateTo({
        url: "/pages/community/community",
      });
    },
    goToSurvey() {
      uni.showToast({
        title: "满意度调查功能开发中",
        icon: "none",
      });
    },
  },
};
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(to bottom right, #f9fafb, #eff6ff);
  display: flex;
  flex-direction: column;
}

/* 导航栏 */
.nav-bar {
  height: 44px;
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.nav-title {
  font-size: 17px;
  font-weight: 600;
  color: #000000;
}

.nav-right {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.icon {
  font-size: 20px;
}

.icon-small {
  font-size: 14px;
}

/* 主内容 */
.content {
  flex: 1;
  padding-bottom: 60px;
}

/* 章节 */
.section {
  padding: 12px 16px 16px;
}

.section-bottom {
  padding-bottom: 24px;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.section-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-icon-blue {
  background: linear-gradient(to bottom right, #3b82f6, #4f46e5);
}

.section-icon-green {
  background: linear-gradient(to bottom right, #10b981, #059669);
}

.section-icon-indigo {
  background: linear-gradient(to bottom right, #6366f1, #7c3aed);
}

.section-title {
  font-size: 14px;
  font-weight: bold;
  color: #111827;
}

/* 工作台容器 */
.workbench-container {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
}

.workbench-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.workbench-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
}

.workbench-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: white;
}

/* 图标渐变色 */
.workbench-icon-blue {
  background: linear-gradient(to bottom right, #3b82f6, #2563eb);
}

.workbench-icon-amber {
  background: linear-gradient(to bottom right, #f59e0b, #ea580c);
}

.workbench-icon-green {
  background: linear-gradient(to bottom right, #10b981, #059669);
}

.workbench-icon-orange {
  background: linear-gradient(to bottom right, #f97316, #dc2626);
}

.workbench-icon-pink {
  background: linear-gradient(to bottom right, #ec4899, #f43f5e);
}

.workbench-icon-cyan {
  background: linear-gradient(to bottom right, #06b6d4, #3b82f6);
}

.workbench-icon-yellow {
  background: linear-gradient(to bottom right, #eab308, #f59e0b);
}

.workbench-icon-purple {
  background: linear-gradient(to bottom right, #a855f7, #6366f1);
}

.workbench-icon-red {
  background: linear-gradient(to bottom right, #ef4444, #ec4899);
}

.workbench-icon-teal {
  background: linear-gradient(to bottom right, #14b8a6, #06b6d4);
}

.workbench-icon-indigo {
  background: linear-gradient(to bottom right, #6366f1, #7c3aed);
}

.workbench-icon-rose {
  background: linear-gradient(to bottom right, #f43f5e, #ec4899);
}

.workbench-icon-emerald {
  background: linear-gradient(to bottom right, #10b981, #14b8a6);
}

.workbench-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  background-color: #ef4444;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid #ffffff;
}

.workbench-badge-text {
  font-size: 11px;
  color: #ffffff;
  font-weight: bold;
  line-height: 1;
}

.workbench-text {
  font-size: 12px;
  color: #374151;
  text-align: center;
  line-height: 1.3;
}

/* 底部导航栏 */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-top: 1px solid #f3f4f6;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.tabbar-icon {
  font-size: 22px;
}

.tabbar-text {
  font-size: 12px;
  color: #6b7280;
}

.tabbar-text-active {
  color: #2563eb;
  font-weight: 500;
}

.tabbar-item-active {
  color: #2563eb;
}
</style>

